import React, { Component } from 'react';
import './xq.css'
import { Button, Input, message } from 'antd';
import { CheckCircleOutlined, CloseCircleOutlined } from '@ant-design/icons';
import axios from 'axios'
class XQ extends Component {
  constructor(props) {
    super(props);
    this.state = {
      shopStatus: '',
      shopId: '',
      shopProposerName: '',
      shopPhone: '',
      shopGroup: '',
      shopLogo: '',
      shopName: '',
      shopAddress: '',
      userName: '',
      shopLicenseTime: '',
      isshenpi: '',
      reson: '',
      shopOperationReason: ''
    }
  }
  componentDidMount() {
    let shopID = this.props.location.query.shopId;
    let isshenpi = this.props.location.query.isshenpi;
    axios.get(`/api/admin/attestation/shopDetails?shopId=${shopID}`).then((res) => {
      if (res.data.code === 200) {
        this.setState({
          shopStatus: res.data.data.shopStatus,
          shopId: res.data.data.shopId,
          shopProposerName: res.data.data.shopProposerName,
          shopPhone: res.data.data.shopPhone,
          shopGroup: res.data.data.shopGroup,
          shopLogo: res.data.data.shopLogo,
          shopName: res.data.data.shopName,
          userName: res.data.data.userName,
          shopAddress: res.data.data.shopAddress,
          shopLicenseTime: res.data.data.shopLicenseTime,
          shopOperationReason: res.data.data.shopOperationReason,
          isshenpi: isshenpi,
        })
      }
    });
  }
  //输入框输入
  onChange = e => {
    this.setState({
      reson: e.target.value
    })
  };
  //认证
  renz() {
    let config = {
      headers: {
        "Content-Type": "application/json;charset=UTF-8",
      },
    };
    axios.post(
      `/api/admin/attestation/shopOk/do?shopId=${this.state.shopId}&shopStatus=${this.state.shopStatus}$shopOperationReason=${this.state.liyou}`,
      config
    ).then((res) => {
      if (res.status === 200) {
        message
          .loading('操作中..', 1)
          .then(() => {
            message.success(' 认证成功', 2.5)
            this.props.history.push('/index/renz')
          })
      } else {
        message
          .loading('操作中..', 1)
          .then(() => {
            message.warning(' 认证失败', 2.5)
          })
      }
    });
  }
  //驳回
  boh() {
    let config = {
      headers: {
        "Content-Type": "application/json;charset=UTF-8",
      },
    };
    if (this.state.reson === "") {
      message.warning(' 请输入驳回理由', 2.5)
    } else {
      let data = new FormData()
      data.append("shopId", this.state.shopId);
      data.append("shopStatus", this.state.shopStatus)
      data.append("shopOperationReason", this.state.reson)
      axios.post(
        "/api/admin/attestation/shopRejected/do",
        data, config
      ).then((res) => {
        if (res.status === 200) {
          message
            .loading('操作中..', 1)
            .then(() => {
              message.success(' 驳回成功', 2.5)
              this.props.history.push('/index/renz')
            })
        } else {
          message
            .loading('操作中..', 1)
            .then(() => {
              message.warning('驳回失败', 2.5)
            })
        }
      });
    }
  }

  render() {
    const { TextArea } = Input;
    return (
      <div className='content'>
        <div className='hezi'>
          <div className='tt'>
            <h1>认证详情</h1>
            <div className='ttc'>
              <span className='ttsta'>认证状态</span>
              <span className='ttstaa'>
                {this.state.shopStatus === 0 && <span className=''>待审核</span>}
                {this.state.shopStatus === 1 && <span className='agren'>已认证<CheckCircleOutlined /></span>}
                {this.state.shopStatus === 2 && <span className='no'>已驳回<CloseCircleOutlined /></span>}
              </span>
            </div>
          </div>
          <div className='tt'>
            <h1>基本信息</h1>
            <div className='ttc'>
              <span className='ttsta'>编号</span>
              <span className='ttstaa'>{this.state.shopId}</span>
            </div>
            <div className='ttc'>
              <span className='ttsta'>姓名</span>
              <span className='ttstaa'>{this.state.userName}</span>
            </div>
            <div className='ttc'>
              <span className='ttsta'>联系电话</span>
              <span className='ttstaa'>{this.state.shopPhone}</span>
            </div>
            <div className='ttc'>
              <span className='ttsta'>基本类型</span>
              <span className='ttstaa'>{this.state.shopGroup}</span>
            </div>
          </div>
          <div className='tt'>
            <h1>公司信息</h1>
            <div className='ttc'>
              <span className='ttsta'>商业登记照片</span>
              <span className='tu'>
                <img src={'http://172.17.6.224:8085' + this.state.shopLogo} alt="" />
              </span>
            </div>
            <div className='ttc'>
              <span className='ttsta'>公司名称</span>
              <span className='ttstaa'>{this.state.shopName}</span>
            </div>
          </div>
          <div className='tt'>
            <h1>经营场所地址</h1>
            <div className='ttc'>
              <span className='ttsta'>地区</span>
              <span className='ttstaa'>{this.state.shopAddress}</span>
            </div>
            <div className='ttc'>
              <span className='ttsta'>详细地址</span>
              <span className='ttstaa'>{this.state.shopAddress}   {this.state.shopName}</span>
            </div>
          </div>
          {this.state.shopStatus !== 0 &&
            <div className='tt'>
              <h1>操作日志</h1>
              <div className='ttc'>
                <span className='zz'></span>
                {this.state.shopStatus === 1 && <span className='agren'>认证店铺</span>}
                {this.state.shopStatus === 2 && <span className='no'>驳回申请</span>}
              </div>
              <div className='ttc'>
                <span className='admin'>{this.state.shopLicenseTime}  admin</span>
                {this.state.shopStatus === 2 && <span className='reason'>驳回原因:</span>}
                {this.state.shopStatus === 2 && <span className='reason'>{this.state.shopOperationReason}</span>}
              </div>
              <div className='rizhi'>
                <p>操作日志</p>
                <p>记录认证审批操作及流转记录</p>
              </div>
            </div>}
          {this.state.isshenpi === true && <div className='tt'>
            <h1>店铺审批</h1>
            <div className='ttc'>
              <span className='renz' onClick={this.renz.bind(this)}><Button > 认证 </Button></span>
              <span onClick={this.boh.bind(this)}><Button
                type="primary"
                danger> 驳回 </Button></span>
              <TextArea placeholder="如果要驳回，请输入驳回理由" allowClear onChange={this.onChange} />
            </div>
          </div>}
        </div>

      </div>
    );
  }
}

export default XQ;